<template>
    <div>
        <!-- header -->
        <div class="header">
        <!-- 1.0 导航栏头部 -->
        <div class="head-top">
            <div class="section">
                <div class="left-box">
                    <span>买买买</span>
                    <a target="_blank" href="#"></a>
                    <a target="_blank" href="#"></a>
                </div>
                <div id="menu" class="right-box">
                    <span v-if='!isLogin'>
                        <router-link to="/site/login/" class="">登录</router-link>
                        <strong>|</strong>
                        <a href="" class="">注册</a>
                        <strong>|</strong>
                    </span>
                    <span v-if='isLogin'>
                        <router-link to="/site/vipCenter" class="">会员中心</router-link>
                        <strong>|</strong>
                        <a @click='logout'>退出</a>
                        <strong>|</strong>
                    </span>
                    <router-link to="/site/shopCart/" class="">
                        <i id="shoppingCartCount" class="iconfont icon-cart"></i>购物车(
                        <span>
                            <span>{{$store.getters.getTotalCounts}}</span>
                        </span>)</router-link>
                </div>
            </div>
        </div>

        <!-- 2.0 导航条 -->
        <div class="head-nav">
            <div class="section">
                <div id="menu2" class="nav-box menuhd">
                    <ul>
                        <li class="index">
                            <a href="#" class="">
                                <span class="out" style="top: 0px;">首页</span>
                            </a>
                        </li>
                        <li class="news">
                            <a href="#" class="">
                                <span class="out" style="top: 0px;">每日精选</span>
                            </a>
                        </li>
                        <li class="photo">
                            <a href="#" class="">
                                <span class="out" style="top: 0px;">秒杀专区</span>
                            </a>
                        </li>
                        <li class="video">
                            <a href="#" class="">
                                <span class="out" style="top: 0px;">我的超市</span>
                            </a>
                        </li>
                        <li class="down">
                            <a href="#" class="">
                                <span class="out" style="top: 0px;">会员权益</span>
                            </a>
                        </li>
                        <li class="goods">
                            <router-link to='/site/goodslist' class="router-link-exact-active ">
                                <span class="out" style="top: 0px;">购物商城</span>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="search-box">
                    <div class="input-box">
                        <input id="keywords" name="keywords" type="text" onkeydown="if(event.keyCode==13){};" placeholder="输入关健字" x-webkit-speech="">
                    </div>
                    <a href="javascript:;">
                        <i class="iconfont icon-search"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 中间占位 -->

    <router-view></router-view>

    <!-- footer -->
    <div class="footer">
                <div class="section">
                    <div class="foot-nav">
                        <a href="">关于我们</a>
                        <strong>|</strong>
                        <a href="">联系我们</a>
                        <strong>|</strong>
                        <a href="">联系客服</a>
                        <strong>|</strong>
                        <a href="">合作招商</a>
                        <strong>|</strong>
                        <a href="">商家帮助</a>
                        <strong>|</strong>
                        <a href="">营销中心</a>
                        <strong>|</strong>
                        <a href="">隐私政策</a>
                    </div>
                    <div class="foot-box">
                        <div class="copyright">
                            <p>版权所有 买买买 </p>
                            <p>公司地址： 联系电话：</p>
                            <p class="gray">Copyright © 2009-2018 itcast Corporation,All Rights Reserved.</p>
                        </div>
                        <div class="service">
                            <p>周一至周日 9:00-24:00</p>
                            <a href="#">
                                <i class="iconfont icon-phone"></i>在线客服</a>
                        </div>
                    </div>
                </div>
            </div>

    </div>
</template>

<style>
@import "./statics/site/js/jqplugins/hoverNav/css/style.css";
</style>


<script>
// import $ from "jquery";
import bus from './common/bus.js';

import Animal from './test.js';
import {Cat} from './test.js'

export default {
    data(){
        return {
            isLogin:false
        }
    },
    created(){

        // const anim1 = new Animal('小白',2);
        // anim1.color= '黄色';
        // anim1.eat("骨头");

        // console.log(anim1);

        // const tom = new Cat('汤姆',4,'灰黑色');
        // tom.shout();
        // console.log(tom);

         bus.$on('loginsuccess', (isLogin) => {
         this.isLogin = isLogin;
       })
        this.checkLogin();
        // this.promise1();
        // this.promise2();
        // this.promise3();
        // this.promise4();
        // this.asyncTest();
     },
     methods:{
         /*
         模拟耗时操作
         promise1(){
             setTimeout(()=>{
                 console.log('1');

                 setTimeout(()=>{
                     console.log('2');

                    setTimeout(()=>{
                        console.log('3');

                        setTimeout(()=>{
                            console.log('4');
                        },1000)
                    },2000)
                 },1000)
             },3000)
         },
        */

        //未经改造
        /** 
        promise2(){
            const promise1 = new Promise(function(resolve,reject){
                setTimeout(()=>{
                        resolve('1');
                },3000)
            });

            promise1.then((res)=>{
                console.log(res);

                const promise2 = new Promise(function(resolve,reject){
                    setTimeout(()=>{
                            resolve('2');
                    },1000)
                })
                  promise2.then((res)=>{
                      console.log(res);
                      const promise3 = new Promise(function(resolve,reject){
                        setTimeout(()=>{
                                resolve('3');
                        },2000)
                })
                promise3.then((res)=>{
                    console.log(res);
                      const promise4 = new Promise(function(resolve,reject){
                        setTimeout(()=>{
                                resolve('4');
                        },2000)
                })
                promise4.then(res=>{
                    console.log(res);
                })
                })
                  })           
        })
        },
    */

    //第一次改造以后
    /**
    promise3(){
        function timeOutPromise(time,data){
            const promise = new Promise(function(resolve,reject){
                setTimeout(()=>{
                        resolve(data);
                },time)
            });
            return promise;
        }

        timeOutPromise(2000,'1').then(res=>{
            console.log(res);

            timeOutPromise(3000,'2').then(res=>{
                console.log(res);

                timeOutPromise(2000,'3').then(res=>{
                    console.log(res);

                    timeOutPromise(1000,'4').then(res=>{
                        console.log(res);
                    })
                })
            })
        })



    },
     */

    //第二次改造
    /** 
    promise4(){
        function timeOutPromise(time,data){
            const promise = new Promise(function(resolve,reject){
                setTimeout(()=>{
                        resolve(data);
                },time)
            });
            return promise;
        }

        timeOutPromise(2000,'1').then(res=>{
            console.log(res);
            return timeOutPromise(3000,'2');
        }).then(res=>{
            console.log(res);
            return timeOutPromise(2000,'3');
        }).then(res=>{
            console.log(res);
            return timeOutPromise(1000,'4');
        }).then(res=>{
            console.log(res);

        })



    },
    */

//async异步
/** 
   asyncTest(){
       function timeOutPromise(time,data){
            const promise = new Promise(function(resolve,reject){
                setTimeout(()=>{
                        resolve(data);
                },time)
            });
            return promise;
        }

        async function stepByStep() { 
            const result1 = await timeOutPromise(3000,'1');
            console.log(result1);

            const result2 = await timeOutPromise(1000,'2');
            console.log(result2);

            const result3 = await timeOutPromise(2000,'3');
            console.log(result3);

            const result4 = await timeOutPromise(1000,'4');
            console.log(result4);
        }

        stepByStep();
   },
   */

         logout(){
             const url = `site/account/logout`;
             this.$axios.get(url).then(response=>{

             })
             this.isLogin=false;
             this.$router.push({path:'/site/goodslist'});
         },
         checkLogin(){
             const url = `site/account/islogin`;
             this.$axios.get(url).then(response=>{
                 if(response.data.code=='nologin'){
                     this.isLogin=false;
                 }else {
                     this.isLogin = true;
                 }
             })
        },
     },
  mounted() {
    $("#menu2 li a").wrapInner('<span class="out"></span>');
    $("#menu2 li a").each(function() {
      $('<span class="over">' + $(this).text() + "</span>").appendTo(this);
    });

    $("#menu2 li a").hover(
      function() {
        $(".out", this)
          .stop()
          .animate({ top: "48px" }, 300); // move down - hide
        $(".over", this)
          .stop()
          .animate({ top: "0px" }, 300); // move down - show
      },
      function() {
        $(".out", this)
          .stop()
          .animate({ top: "0px" }, 300); // move up - show
        $(".over", this)
          .stop()
          .animate({ top: "-48px" }, 300); // move up - hide
      }
    );
  }

};
</script>